import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined,AntDesignOutlined } from '@ant-design/icons';
import { Alert, Checkbox,Form, Input } from 'antd';
import React, { useState ,useEffect} from 'react';
import { Link, connect } from 'umi';
import LoginForm from './components/Login';
import {getPageQuery} from '@/utils/utils';
import styles from './style.less';


const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginForm;

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = props => {
  const { dispatch } = props;
  const { userLogin = {}, submitting } = props;
  const { status, type: loginType } = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [visible, setVisible] = useState(false);
  const [refresh, setRefresh] = useState(new Date().valueOf());
  const [type, setType] = useState('account');
 

  const handleSubmit = values => {
    const { dispatch } = props;
    const params = getPageQuery();
    dispatch({
      type: 'login/login',
      payload: { 
        ...values, 
        type,
        domain:params.domain },
    });
  };

  return (
    <div className={styles.main} style={{marginTop:'50px'}}>
      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
          {status === 'error' && loginType === 'account' && !submitting && (
            <LoginMessage content="账户或密码错误（admin/ant.design）" />
          )}
          
          <Form.Item 
            name="cropName"
            placeholder="企业全称"
            style={{display:visible?"":"none"}}
          >
            <Input placeholder="企业全称"  size="large" prefix={<AntDesignOutlined style={{color: '#1890ff',}} />}/>
          </Form.Item>

          <UserName
            name="account"
            placeholder="用户名: admin or user"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <Password
            name="password"
            placeholder="密码: ant.design"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        <Submit loading={submitting}>登录</Submit>
      </LoginForm>
    </div>
  );
};

export default connect(({ login,loading }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
